<template>
  <el-dialog
    title="批量提取SKU"
    width="400"
    v-model="visible"
    @close="handleClose"
    draggable
    align-center
    :z-index="2000"
  >
    <div class="h-[460px]">
      <div class="flex py-2">
        <el-select
          class="w-full"
          v-model="extractKey"
          collapse-tags
          placeholder="请选择"
          @change="changeSelect"
        >
          <el-option
            v-for="item in dataOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button class="ml-auto" type="primary" @click="copyText(copyData)"
          >复制</el-button
        >
      </div>
      <el-input
        v-model="copyData"
        :autosize="{ minRows: 18, maxRows: 18 }"
        type="textarea"
        placeholder="复制内容"
      />
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button :disabled="loading" @click="handleClose(false)">
          {{ disabled ? "关闭" : "取消" }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { ElMessage } from "element-plus";
import { copyText } from "@/utils/tools.js";
import { reactive, toRefs } from "vue";
import { dataOptions } from "./data.js";

const data = reactive({
  visible: false,
  records: [],
  copyData: "",
  extractKey: "sku",
});

const { visible, records, copyData, extractKey } = toRefs(data);

const open = (data) => {
  records.value = data;
  visible.value = true;
  filterData();
};

// 处理提前值
const filterData = () => {
  const skuList = records.value?.map((i) => i[extractKey.value]);
  const filteredArray = [...new Set(skuList?.filter((item) => item !== ""))];
  const text = filteredArray.join("\n");
  copyData.value = text;
};

const changeSelect = (val) => {
  filterData();
};

const emit = defineEmits(["refresh", "close"]);
const loading = ref();
const handleClose = () => {
  extractKey.value = "sku";
  copyData.value = "";
  records.value = [];
  visible.value = false;
};

defineExpose({ open });
</script>
